<template>
	<view class="product">
		<!-- 头部 -->
		
		<!-- 错误  @change -->
		<radio-group class="head-bar"  @change="headChange">
			<label class="label" :class="{'active':index==current}" v-for="(item, index) in headItems" :key="item.value">
				<radio  :value="item.value" :checked="index === current" />
				{{item.name}}
			</label>
		</radio-group>


<!-- 列表 -->

	

		<navigator class="list-page" v-for="(item,index) in productListCom"  :url="'../detail/detail?productId='+item.id">
			<view class="left">
				<view class="background">
					<image class="img" :src="item.cover_img "  mode=""></image>
					
					<view class="name">
						{{ item.gname }}
					</view>
					
					<view class="lefts">
						<view class="price">
							￥{{ item.price_now }}
						</view>
						<view class="address">
							{{item.origin_city || "不凡"}}
						</view>
					</view>
				</view>
			</view>
			
		</navigator>
		</view>
		
		
	
	
	
</template>

<script>
	import productApi from "@/api/product"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	export default {
		components: {
					uniLoadMore 
				},
		data() {
			return {
				current: '0',
				
				more: 'more',
				productList: [],
				headItems: [{
						name: "新品",
						value: "0"

					},
					{
						name: "销量",
						value: "1"

					},
					{
						name: "价格",
						value: "2"

					},
					{
						name: "筛选",
						value: "3"

					},

				],
		 page: {
		 			start: 1,
					limit: 10,
					lastPage: false
				}
			}
		},
		onLoad(option) {
			// console.log(option)
			
			// 错误 id传错
			this.kindId = option.kindId;
			// console.log(option)
			this.getProductList()
		},
		
			onReachBottom() {
					//如果不是最后一页 重新发送请求
					if (!this.page.lastPage) {
						this.page.start++;
						this.more = 'loading';
						setTimeout(() => {
							this.getProductList();
						}, 500)
		
					}
				},

		methods: {
		
			async getProductList() {
				uni.showLoading({
					title: '加载中'
				});
				var pageP = {
					start: this.page.start,
					limit: this.page.limit
				}
				//获取列表
				var res = await productApi.productList({
					kindId: this.kindId,
					...pageP,

				})
				this.productList = this.productList.concat(res.data.list);
				

				// console.log('封装后的api...', res)
				this.page.lastPage = res.data.lastPage;
			 	//如果是最后一页
				if (this.page.lastPage) {
					this.more = "noMore";
			 	}
				var title = res.kind ? res.kind.ctitle : '';
				uni.setNavigationBarTitle({
			 		title: title
			 	})
			 	uni.hideLoading()

			},

			headChange(e) {
				this.current = e.detail.value;
			
			}
			
			

			
		},
		
		computed: {
					productListCom() {
						var res = this.productList;
						
						var obj = JSON.parse(JSON.stringify(this.productList));
						switch (this.current) {
							case "0":
								res = this.productList;
								break;
		
							case "2":
								res = obj.sort((a, b) => {
									return b.price_now - a.price_now;
		
								})
								break;
							default:
								break;
						}
						return res;
						
					}
				},
	}
</script>

<style lang="scss" scoped>
	.product {
		.head-bar {
		
	
			
			z-index: 9;
			height: 60rpx;
			margin-top: -3rpx;
		
			display: flex;
		
			justify-content: space-around;
			background-color: #354E44;

			.label {
				font-family: PingFangSC-Regular;
				font-size: 30rpx;
				color: #FFFFFF;
				letter-spacing: 2.14rpx;

				radio {
					display: none;


				}

				&.active {
					border-bottom: 5rpx solid #F1ECE7;
					color: #FFFFFF;
				}

			}
		}

		.list-page {
			
			.left{
				margin-top: 72rpx;
				  width: 100%;
				  
				
				.background{
					width: 300rpx;
					height: 416rpx;
					
					 float: left;
					margin-left: 50rpx;
					margin-top: 38rpx;
					background: #FFFFFF;
					box-shadow: 0 8rpx 16rpx 0 rgba(83,66,49,0.06);
					border-radius: 10rpx;
					border-radius: 10rpx;
					
					    // width: 400px;
					    // height: 250px;
					.img{
					
						width: 100%;
						height: 238rpx;
					
					}
					.name{
						margin-top: 28rpx;
						margin-left: 36rpx;
						font-family: PingFangSC-Semibold;
						font-size: 26rpx;
						color: #3E3E3E;
						letter-spacing: 1.86rpx;
						
						
						overflow: hidden;
						 text-overflow: ellipsis;/*文字隐藏后添加省略号*/
						 white-space: nowrap;/*强制不换行*/
					}
					.lefts{
						margin-top: 61rpx;
						display: flex;
						    justify-content: space-around;
						.price{
							font-family: PingFangSC-Semibold;
							font-size: 26rpx;
							color: #3E3E3E;
							letter-spacing: 1.86rpx;
						}
						.address{
							font-family: PingFangSC-Regular;
							font-size: 22rpx;
							color: #3E3E3E;
							letter-spacing: 1.57rpx;
							overflow: hidden;
							white-space: nowrap;
							margin-left: 20rpx;
							text-overflow: ellipsis;
						}
					}
				}
			}
		
		}
	}
</style>
